<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#canvas{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script type="text/javascript">
	//获得画布对象
		var ctx=document.getElementById("canvas").getContext('2d');
		//设置填充颜色
		ctx.fillStyle="#A00000";
		//实心矩形
		ctx.fillRect(0,0,150,150);
		//设置线条颜色
		ctx.strokeStyle="red";
		//设置线条宽度
		ctx.lineWidth=3;
		//设置线条
		ctx.lineJoin='round';//bevel斜角，miter尖角
		//空心矩形
		ctx.strokeRect(200,200,100,100);
		//清空矩形
		ctx.clearRect(20,20,100,100);
		
		
	</script>
</body>
</html>